<template>
  <div v-if="goodsSelectVisible" class='goods-wrap'>
    <div class='search-model'>
      <el-form label-width='80px'>
        <el-row>
          <el-col :span='8'>
            <el-form-item label="名称:">
              <el-input class="input" v-model="searchData.name" size="small" placeholder="请输入商品名称搜索"
                        @keyup.enter.native='getTableData(pageSize, pageNum)'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='8'>
            <el-form-item label="商品条码:">
              <el-input class="input" v-model="searchData.barCode" size="small" placeholder="请输入商品条码搜索"
                        @keyup.enter.native='getTableData(pageSize, pageNum)'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span='6'>
            <el-form-item label="分类:" label-width='60px'>
              <el-select v-model="searchData.primaryClassifyId" size="small"  style='width: 100%'>
                <el-option label='全部' value=''></el-option>
                <el-option v-for="(item, index) in goodsClassifyList" :key="index" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='8'>
            <el-form-item label="品牌:">
              <el-select v-model="searchData.brandId" size="small"  style='width: 100%'>
                <el-option label='全部' value=''></el-option>
                <el-option v-for="(item, index) in goodsLabelList" :key="index" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span='9'>
            <el-form-item label-width='35px'>
              <el-button type='primary' @click='getTableData(pageSize, pageNum)' size='small'>查询</el-button>
              <el-button type='danger' @click='resetSearch()' size='small' plain>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="goodsAllList" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange" max-height='400px'>
      <el-table-column type="selection" width="80" align='center' :selectable='isAvilaue'></el-table-column>
      <el-table-column type="index" width="80" label='序号' align='center'></el-table-column>
      <el-table-column prop='name' label='商品名称' align='center'></el-table-column>
      <el-table-column prop='goodsCode' label='商品条码' width='180' align='center'></el-table-column>
      <el-table-column prop='brand' label='品牌' width='120' align='center'></el-table-column>
      <el-table-column prop='primaryClassify' label='分类' width='240' align='center'></el-table-column>
      <el-table-column prop='unitName' label="单位" width="80" align='center'></el-table-column>
    </el-table>
    <div class="pageblock">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNum" :page-sizes="[5,10,20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <footer>
      <el-button type='primary' @click='confirmAdd()'>确定添加</el-button>
      <el-button type='primary' plain @click='addCancel' key='cancel'>取 消</el-button>
    </footer>
  </div>
</template>
<script>
  import {
    findGoodsListPage,
    getGoodsLabelList,
    getGoodsClassifyList
  } from '@/api'
  import {mapState} from 'vuex'

  export default {
    name: "addGoods",
    data() {
      return {
        goodsAllList: [],
        goodsLabelList: [],
        goodsClassifyList: [],
        selectedList: [],
        searchData: {
          name: '',
          barCode: '',
          primaryClassifyId: '',
          brandId: ''
        },
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    },
    props: ['goodsSelectVisible','arr'],
    computed: mapState([
      "sub",
      "power",
      "merchantId",
      "isReLoadData"
    ]),
    watch: {
      goodsSelectVisible(cur, old) {
        if(cur == true){
          this.getTableData(this.pageSize, this.pageNum)
        }
      }
    },
    created() {
    },
    mounted() {
      this.getTableData(this.pageSize, this.pageNum)
      this.getGoodsLabel()
      this.getGoodsClassify()
    },
    methods: {
      //过滤已选择的商品
      isAvilaue(row, index){
        if(this.arr.some(el=>{return el.goodsId === row.id})){
          return false;
        }else{
          return true;
        }
      },
      //添加商品
      confirmAdd(){
        let addLen = this.selectedList.length
        if ((this.arr.length + addLen) > 20) {
          this.$message.error(`最多只能再添加${20 - this.arr.length}个商品`)
        }else {
          this.$emit('addGoodsItem', this.selectedList)
          this.resetSearch()
        }
      },
      //取消
      addCancel(){
        this.resetSearch()
        this.$emit('update:goodsSelectVisible', false)
      },
      //重置搜索关键字
      resetSearch(){
        this.searchData.name = ''
        this.searchData.barCode = ''
        this.searchData.primaryClassifyId = ''
        this.searchData.brandId = ''
        this.pageNum = 1
        this.pageSize = 10
     },
      //获取商品分类
      getGoodsClassify() {
        let data = {
          // shopId: this.merchantId
        }
        getGoodsClassifyList(data).then(res => {
          this.goodsClassifyList = res.data.list
        })
      },
      //获取商品品牌
      getGoodsLabel() {
        let data = {
          labelType: 0,
          name: '',
          shopId: this.merchantId
        }
        getGoodsLabelList(data).then(res => {
          this.goodsLabelList = res.data.list
        })
      },
      //获取商品列表
      getTableData(pageSize, pageNum) {
        let data = this.searchData
        data = Object.assign({},data,{
          shopId: this.merchantId,
          pageNo: pageNum,
          pageSize: pageSize
        })
        findGoodsListPage(data).then(res => {
          this.goodsAllList = res.data.list
          this.total = res.data.total
        })
      },
      handleSelectionChange(val) {
        this.selectedList = val
      },
      // 更改每页条数
      handleSizeChange(val) {
        this.pageSize = val;
        this.getTableData(val, this.pageNum);
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getTableData(this.pageSize, val);
      },
    }
  }
</script>

<style scoped>
  .goods-wrap {
    width: 100%;
    padding: 0 15px;
  }
  footer{
    text-align: center;
    padding: 20px 0 15px;
  }
</style>
